<template>
	<div id="app">
		<header v-show="showHander">
			<!-- 顶部 start -->
			<div class="top-bg">
				<div class="top container">
					<div class="logo"><img src="./assets/img/logo.png" style="vertical-align: middle;"></div>
					<div class="search">
						<input v-model="q" id="search_input" type="text" placeholder="请输入商品关键词">
						<i @click="search" id="btn_search" class="fa fa-search search-icon"></i>
					</div>
					<div class="user-and-cart">
						<div class="user left">
							<i class="fa fa-user fa-lg hand hover-white"></i>
							<span v-if="user">{{user.userName}}</span>
							<router-link to="Login" v-if="!user">登录</router-link>
						</div>
						<div class="cart left hand">
							<div class="hover-white" @click="togo">
								<i class="fa fa-shopping-cart fa-lg"></i>
							</div>

						</div>
					</div>
				</div>
			</div>
			<!-- 顶部 end -->

			<!-- 横向导航 start -->
			<div class="nav-bg">
				<div class="container">
					<ul class="nav clearfix">
						<li>
							<router-link to="/">首页</router-link>
						</li>
						<li>
							<router-link to="/list">全部商品</router-link>
						</li>
					</ul>
				</div>
			</div>
			<!-- 横向导航 end -->
		</header>

		<router-view :key="this.$route.fullPath"></router-view>

		<footer class="footer" v-show="showHander">
			<div class="container">
				<div class="footer1">
					<ul>
						<li>
							<h4>订单服务</h4>
						</li>
						<li><a href="">Odio debitis.</a></li>
						<li><a href="">Excepturi amet!</a></li>
						<li><a href="">Ducimus aspernatur.</a></li>
						<li><a href="">Quisquam dignissimos.</a></li>
					</ul>
					<ul>
						<li>
							<h4>服务支持</h4>
						</li>
						<li><a href="">Tempore earum.</a></li>
						<li><a href="">Illum ratione.</a></li>
						<li><a href="">Dicta reprehenderit?</a></li>
						<li><a href="">Nobis corrupti.</a></li>
					</ul>
					<ul>
						<li>
							<h4>自助服务</h4>
						</li>
						<li><a href="">Neque quod.</a></li>
						<li><a href="">Omnis deleniti.</a></li>
						<li><a href="">Deleniti maiores.</a></li>
						<li><a href="">Debitis modi.</a></li>
					</ul>
					<ul>
						<li>
							<h4>友情链接</h4>
						</li>
						<li><a href="">Odio perferendis?</a></li>
						<li><a href="">Quia doloribus.</a></li>
						<li><a href="">Atque eveniet.</a></li>
						<li><a href="">Quis delectus!</a></li>
					</ul>
					<ul>
						<li>
							<h4>其它项目</h4>
						</li>
						<li><a href="">Nam asperiores!</a></li>
						<li><a href="">A dolor!</a></li>
						<li><a href="">At distinctio?</a></li>
						<li><a href="">Ipsam earum!</a></li>
					</ul>
					<ul>
						<li>
							<h4>关注我吧</h4>
						</li>
						<li><a href="">Ipsum at?</a></li>
						<li><a href="">Quos dolorem.</a></li>
						<li><a href="">Maiores ullam.</a></li>
						<li><a href="">Eaque nemo!</a></li>
					</ul>
				</div>
				<div class="footer2">
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis tenetur!</p>
					<p>Veniam quia mollitia laboriosam quae quod rerum fugiat esse quos!</p>
				</div>
			</div>
		</footer>

	</div>
</template>
<script>
	export default {
		data() {
			return {
				q: '',
				user: {

				}
			}
		},
		methods: {
			search() {
				this.$router.push({
					name: 'List',
					query: {
						q: this.q
					}
				})
			},
			getUser() {
				this.user = JSON.parse(sessionStorage.getItem('newuser'));
			},
			togo(){
				if(this.user){
					this.$router.push({
						name:'Cart'
					})
				}else{
					this.$router.push({
						name:'Login'
					})
				}
			}
		},
		created() {
			this.getUser();
		},
		beforeUpdate() {
			this.getUser();
		},
		computed: {
			showHander() {
				return ['Register', 'Login'].indexOf(this.$route.name) < 0;
			}
		}
	}
</script>
<style>
	@import url("./assets/font-awesome-4.7.0/css/font-awesome.min.css");

	/* 全局统一设置, 用于所有的html页面 */
	body {
		margin: 0px;
		color: #666666;
		font-size: 14px;
	}

	a {
		color: #666666;
		text-decoration: none;
	}

	a:hover,
	.color1 {
		color: #D44D44;
	}

	.color2 {
		color: #959595;
	}

	.big {
		font-weight: bold;
		font-size: 1.5em;
	}

	* {
		box-sizing: border-box;
	}

	ul {
		padding: 0px;
		margin: 0px;
		list-style: none;
	}

	input,
	select,
	textarea,
	img {
		/* vertical-align用来控制垂直对齐方式, 但这个属性只对input,select,textarea,img,td,th有效 */
		vertical-align: middle;
	}

	.left {
		float: left;
	}

	.right {
		float: right;
	}

	.clearfix:after {
		content: "";
		display: block;
		clear: both;
	}

	.mb20 {
		margin-bottom: 20px;
	}

	/* 页面内容容器 */
	.container {
		width: 1200px;
		margin: 0 auto;
	}


	/* 页面主体 start */

	.main {
		background-color: #EDEDED;
		padding: 20px 0px;
	}

	/* 商品列表模块通用样式 */
	.module h3 {
		margin: 0px;
		padding: 15px;
		/* 背景图用2种颜色作线性渐变 */
		background-image: linear-gradient(to bottom, #FAFAFA, #ECECEC);
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
		box-shadow: 0px 0px 16px 0px #CCCCCC;
	}

	.module {}

	.module ul {
		display: flex;
		flex-wrap: wrap;
		background-color: #FFFFFF;
	}

	.module ul li {
		width: 25%;
		text-align: center;
		padding: 40px 0px;
	}

	.module ul li img {
		width: 200px;
		height: 200px;
	}

	.module ul li:hover {
		box-shadow: 0px 0px 10px 0px #CCCCCC;
	}

	/* 美丽的按钮样式 */

	/* 数量+, 数量-, ... */
	.number-bar {
		display: flex;
		align-items: center;
	}

	.number-bar>* {
		margin-right: 20px;
	}

	.number-control {
		width: 30px;
		height: 30px;
		display: block;
		background-color: #FCFCFC;
		border: 1px solid #CCCCCC;
		text-align: center;
		line-height: 28px;
		font-weight: bold;
		border-radius: 50%;
		box-shadow: 0px 0px 1px 3px #EEE;
		cursor: pointer;
	}

	/* 蓝色按钮 */
	.btn-blue {
		width: 150px;
		height: 50px;
		border: none;
		color: #FFFFFF;
		background-color: #5B7CCB;
		border-radius: 4px;
		cursor: pointer;
	}

	/* 顶部背景黑background-color:  */
	.top-bg {
		background-color: #040404;
		min-width: 1200px;
	}

	.top {
		height: 100px;
		line-height: 100px;
		color: #C8C8C8;
		/* 框住它的那些设置了position:absolute的子元素 */
		position: relative;
	}


	.logo {
		/* 绝对定位 */
		position: absolute;
		/* 左侧: 0 */
		left: 0px;
	}

	.search {
		width: 300px;
		/* 定位在top-bg的中心点位置 */
		position: absolute;
		left: 50%;
		margin-left: -150px;
	}

	.search input {
		width: 100%;
		padding: 10px 39px 10px 12px;
		border-radius: 4px;
	}

	.search-icon {
		position: absolute;
		right: 0px;
		top: 32px;
		width: 39px;
		height: 39px;
		text-align: center;
		line-height: 39px !important;
		cursor: pointer;
	}

	.user-and-cart {
		position: absolute;
		right: 0px;
	}

	.cart {
		margin-left: 30px;
	}

	.cart-num {
		padding: 0px 6px;
		background-color: #9A9A9A;
		border-radius: 50%;
	}

	/* cart-box用于显示购物车里的内容 */
	.cart-box {
		width: 320px;
		height: 280px;
		background-color: white;
		/* 阴影 */
		box-shadow: 0px 0px 15px #9A9A9A;
		border-radius: 4px;
		/* 绝对定位在容器的右侧位置 */
		position: absolute;
		right: 0px;
		top: 80px;
		line-height: 1.2;
		/* 默认隐藏, 不显示 */
		display: none;
	}

	/* 在cart-box的前面追加一个向上指的白色箭头元素 */
	.cart-box:before {
		content: "";
		/* 白色箭头实际上是一个元素的下边框, 这个元素宽高都是0, 四条边就是4个三角形, 让其中三条边透明色, 余下的一条边自然就是视觉中的三尖角 */
		border-top: 10px solid transparent;
		border-right: 10px solid transparent;
		border-bottom: 10px solid white;
		border-left: 10px solid transparent;
		width: 0px;
		/* 把白色箭头定位在cart-box的右上位置 */
		position: absolute;
		right: 25px;
		top: -20px;
	}

	/* 鼠标晃到cart上时, 就显示里面的cart-box */
	.cart:hover .cart-box {
		display: block;
	}

	/* 空车样式 */
	.empty-cart {
		text-align: center;
		margin-top: 80px;
	}

	.hand {
		cursor: pointer;
	}

	.hover-white:hover {
		color: white;
	}

	/* 横向导航条 */
	.nav-bg {
		background-color: #F7F7F7;
		height: 90px;
	}


	.nav li {
		float: left;
		margin: 0px 20px;
	}

	.nav li a {
		text-decoration: none;
		color: #666666;
		line-height: 90px;
		font-size: 14px;
	}

	.nav li a:hover {
		color: #D44D44;
	}


	.nav li:first-child {
		margin-left: 0px;
	}

	.footer {
		font-size: 14px;
		color: #666666;
		line-height: 2em;
		background-color: #FAFAFA;
		padding: 40px 0px;
	}

	.footer1 {
		/* 弹性布局: ul子元素默认水平排列 */
		display: flex;
		/* 让水平排列的6个ul彼此之间相同间距, 两端对齐 */
		justify-content: space-between;
		/* 下边框 */
		border-bottom: 1px solid #EEEEEE;
		padding: 20px 0px;
		margin-bottom: 20px;
	}

	.footer2 p {
		margin: 0px;
	}
</style>
